<template>
  <el-dialog title="新建跟进项" :visible.sync="addRowData.show" width="510px" class="m-dialog"
             :close-on-click-modal="false" :close-on-press-escape="false" @close="clearAddRowData">
    <el-form :model="addRowData.form" :inline="true" :rules="addRowData.rules" ref="refAddRowData" label-position="left" label-width="80px">
      <el-form-item label="主题" prop="theme">
        <el-input v-model="addRowData.form.theme" clearable></el-input>
      </el-form-item>
      <el-form-item label="主题描述" prop="themeDesc">
        <el-input
          type="textarea"
          clearable
          :autosize="{ minRows: 2, maxRows: 4}"
          v-model="addRowData.form.themeDesc">
        </el-input>
      </el-form-item>
      <div class="flex row-towItem">
        <div>
          <el-form-item label="名单类型" prop="type">
            <el-select v-model="addRowData.form.type" placeholder="请选择"
                       :disabled="(addInfo.type == '1'|| addInfo.type == '2')" :clearable="(addInfo.type != '1'&& addInfo.type != '2')">
              <el-option label="LEAD" :value="2"></el-option>
              <el-option label="真实账号" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="名单" prop="typeId">
            <el-input v-model="addRowData.form.typeId"
                      :disabled="(addInfo.type == '1'|| addInfo.type == '2')" :clearable="(addInfo.type != '1'&& addInfo.type != '2')"></el-input>
          </el-form-item>
        </div>
      </div>
      <el-form-item label="处理状态">
        <el-input disabled value="待处理"></el-input>
      </el-form-item>
      <el-form-item label="预约时间" prop="resvTime" >
        <el-date-picker
          clearable
          :editable="false"
          v-model="addRowData.form.resvTime"
          type="datetime"
          :picker-options="pickerOptions"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="预约提醒" prop="during">
        <el-select v-model="addRowData.form.during" placeholder="请选择" clearable  :disabled="!addRowData.form.resvTime">
          <el-option label="5分钟前" value="5"></el-option>
          <el-option label="10分钟前" value="10"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分配给"  prop="assigner" class="last">
        <el-select
          clearable
          v-model="addRowData.form.assigner"
          filterable
          remote
          reserve-keyword
          :remote-method="remoteUserMethod"
          placeholder="请输入关键词"
        >
          <el-option
            v-for="item in userList"
            :label="item._id"
            :key="item._id"
            :value="item._id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addRowData.show=false">取消</el-button>
      <el-button type="primary" @click="addRowDataSubmit" :loading="addLoading">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import * as FollowUpAPI from '@/Api/followup';
  import * as UserAPI from '@/Api/user'
  import * as Utils from '@/utils'
  export default {
    name: 'CompAddFollowUp',
    data () {
      return {
        pickerOptions:{
          disabledDate(time) {
            return time.getTime() <= Date.now()-24*60*60*1000;
          },
        },
        addLoading:false,
        addRowData: {
          show: false,
          form: {
            theme: '',
            themeDesc: '',
            type: '',
            typeId: '',
            resvTime: '',
            during: '',
            assigner: this.$store.state.app.userInfo.nickname,
          },
          rules: {
            theme: [
              {required: true, trigger: 'blur', message: '内容不能为空'},
              {max: 30, trigger: 'blur', message: '长度不能大于30个字符'}
            ],
            themeDesc: [
//              {required: true, trigger: 'blur', message: '内容不能为空'},
              {max: 200, trigger: 'blur', message: '长度不能大于200个字符'}
            ],
            type: [
              {required: true, trigger: 'blur', message: '请选择'},
            ],
            typeId: [
              {required: true, trigger: 'blur', message: '内容不能为空'}
            ],
          },
        },
        userList:[],
      }
    },
    props: ['type','show','from'],
    computed: {
      addInfo() {
        let _obj = {
          type: this.type,
        };
        if (this.type) {
          _obj.typeId = this.$route.params.id.split("_")[0]
          this.addRowData.form.type = this.type;
          this.addRowData.form.typeId = this.$route.params.id.split("_")[1];
        } else {
          _obj.typeId = '';
        }
        return _obj
      }
    },
    watch:{
        'addRowData.form.resvTime'(val){
            if(!val) {
                this.addRowData.form.during = '';
            }
        },
        'show'(val){
          this.addRowData.show = val;
        }
    },
    methods: {
      addRowDataSubmit(){
        this.$refs.refAddRowData.validate(flg => {
          if (!flg) {
            return;
          }
          this.addLoading = true;
          FollowUpAPI[this.from=='desktop'?'ifollowCreate':'followCreate'](this.addRowData.form)
            .then(res => {
              this.addLoading = false;
              if (res.code != 0) {
                this.$notify.warning({
                  title: '温馨提示',
                  message: res.msg
                })
                return;
              }
              this.addRowData.show = false;
              this.$message({
                message: '新建成功',
                type: 'success'
              });
              this.$emit('addSuccess');
            })
            .catch(error => {
              this.addLoading = false;
              console.log(error);
            })

        })
      },
      clearAddRowData(){
        this.$emit('update:show', false)
        this.$refs.refAddRowData.resetFields();
      },
      remoteUserMethod(queryStr) {
        if (queryStr != '') {
          UserAPI.userNickname({
            input: queryStr
          })
            .then(res => {
              if (res.code != '0') {
                this.$notify({
                  title: '温馨提示',
                  message: res.msg,
                  type: 'warn'
                })
                return;
              }
              this.userList = res.data;
            })
            .catch(error => {
              console.log(error)
            })
        }

      },
    },
  }
</script>

<style scoped lang="scss">
</style>
